import {Box, Flex, Text } from '@chakra-ui/react';
import { AiOutlineWeibo, AiFillWechat, AiOutlineQq } from 'react-icons/ai';

const h6Pseudo = {
  content: '""',
  borderTop: '1px solid #b5b5b5',
  display: 'block',
  position: 'absolute',
  width: '60px',
  top: '5px',
};

export default function FormFooter({ login }) {
  return (
    <Box mt="50px">
        <Text
          as="h6"
          pos="relative"
          mb="10px"
          fontSize="12px"
          lineHeight="12px"
          color="#b5b5b5"
          textAlign="center"
          _before={{...h6Pseudo, left: '30px'}}
          _after={{...h6Pseudo, right: '30px'}}
        >
          { login ? '社交账号登录' : '社交账号直接注册' }
        </Text>
        <Flex justify="space-around" align="center" mb="10px" px={login ? '50px' : '80px'} h="50px" fontSize="32px">
          { login && <AiOutlineWeibo style={{ color: '#e05244', cursor: 'pointer' }} /> }
          <AiFillWechat style={{ color: '#00bb29', cursor: 'pointer' }} />
          <AiOutlineQq style={{ color: '#498ad5', cursor: 'pointer' }} />
        </Flex>
      </Box>
  )
}